<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>全局注册方式构建父子组件</title>
    <script src="vue.js"></script>
    <style>
      .parent {
        background-color: lightblue;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        height: 200px;
      }

      .child {
        background-color: lightgreen;
        padding: 5px;
        border-radius: 3px;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <parent></parent>
    </div>
    <script>
      //构建子组件child
      var childNode = Vue.extend({
        template: '<div class="child">这是子组件</div>',
      });
      //注册名为'child'的组件
      Vue.component("child", childNode);

      //构建父组件parent,在其中嵌套child组件
      var parentNode = Vue.extend({
        template: '<div class="parent">这是父组件<child></child></div>',
      });
      Vue.component("parent", parentNode);

      // //构建子组件child
      // Vue.component("child", {
      //       template: '<div class="child">这是子组件</div>',
      //     });
      //     //构建父组件parent,在其中嵌套child组件
      // Vue.component("parent", {
      //       template: '<div class="parent">这是父组件<child></child></div>',
      //     });

      // 创建根实例
      var vm = new Vue({
        el: "#app",
      });
    </script>
  </body>
</html>
